<template>
	<div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel">
					<div class="panel-heading bk-bg-primary">
						<h6><i class="fa fa-table red"></i><span class="break"></span>客户管理</h6>
					</div>

					<div class="panel-body">
						<div style="float: right; margin-bottom: 10px;">

							<button type="button" class="btn btn-warning"  @click="geustAdd('新增客户')" v-if="roleInfo.role === 'ROLE_SALES' || roleInfo.role === 'ROLE_USER_LV1'">新增客户</button>
						</div>
						<div class="clearfix"></div>

						<div class="table-responsive">
							<table class="table table-striped table-bordered bootstrap-datatable datatable">
								<thead>
								<tr>
									<th style="width: 25px;">序号</th>
									<th>公司名称</th>
									<th>联系人</th>
									<th>联系电话</th>
									<th>邮箱</th>
									<th>所属行业</th>
									<th>公司地址</th>
									<th>累计开卡数量</th>
									<th>消费金额</th>
									<th>备注</th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>
								<tr v-for="(items, index) in agentList.result">
									<td>{{ index + 1 }}</td>
									<td>{{ items.company }}</td>
									<td>{{ items.description }}</td>
									<td>{{ items.phone }}</td>
									<td>{{ items.email }}</td>
									<td>{{ items.industryCn }}</td>
									<td>{{ items.address }}</td>
									<td>{{ items.totalCards }}</td>
									<td>{{ items.totalMoney }}</td>
									<td>{{ items.remarks }}</td>
									<td>
										<a class="label label-success" @click="geustEdit('编辑客户', items.username)" v-if="items.isEdit">编辑</a>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<lsc-page
							mode="event"
							:totalPage="pages"
							:init-page="eventPage"
							:eventFunt="eventFunt"
							@go-page="goPage"></lsc-page>
		</div>

		<!-- Modal Dialog -->
		<div class="modal fade" id="myModalNew" v-if="roleInfo.role === 'ROLE_SALES' || roleInfo.role === 'ROLE_USER_LV1'">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title bk-fg-primary">{{guestTitle}}</h4>
					</div>
					<div class="modal-body">
							<div class="panel-body">
								<form action="" method="post" enctype="multipart/form-data" class="form-horizontal ">
									<div class="form-group">
										<label class="col-md-3 control-label">公司名称</label>
										<div class="col-md-9">
											<input type="text" name="text-input" class="form-control" placeholder="公司名称" v-model="company">
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">所属行业</label>
										<div class="col-md-9">
											<select name="select" class="form-control" size="1" v-model="industry">
												<option v-for="(opts, key) in industryList.result" :value="key">{{opts}}</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">登录帐号</label>
										<div class="col-md-9">
											<input type="tel" maxlength="11" name="text-input" class="form-control" placeholder="手机号" v-model="username" @blur="checkValue">
										</div>
									</div>
									<div class="form-group" v-if="showPwd">
										<label class="col-md-3 control-label">密码</label>
										<div class="col-md-9">
											<input type="text" maxlength="16" name="text-input" class="form-control" v-model="password">
											<span class="help-block">初始密码：12345678</span>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">联系人</label>
										<div class="col-md-9">
											<input type="text" name="text-input" class="form-control" placeholder="联系人" v-model="description">
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">联系电话</label>
										<div class="col-md-9">
											<input type="tel" name="text-input" class="form-control" placeholder="联系电话" v-model="phone">
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">邮箱地址</label>
										<div class="col-md-9">
											<input type="email" name="text-input" class="form-control" placeholder="邮箱地址" v-model="email" @blur="checkValue">
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">收货地址</label>
										<div class="col-md-9">
											<input type="text" name="text-input" class="form-control" placeholder="收货地址" v-model="address">
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">备注</label>
										<div class="col-md-9">
											<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="备注" v-model="remarks"></textarea>
										</div>
									</div>
									<div class="form-group" v-if="infoTips">
										<label class="col-md-3 control-label">&nbsp;</label>
										<div class="col-md-9 tipsColor">
											{{infoTips}}
										</div>
									</div>
								</form>
							</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" @click='agentSave(showPwd)'>提交</button>
					</div>
				</div>
			</div>
		</div><!-- End Modal Dialog -->

	</div>
</template>
<script>

	import LscPage from '../../components/page_list.vue'
	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				roleInfo: 'getRoleInfo',
				agentList: 'getAgentList',
				agentInfo: 'getAgentInfo',
				industryList: 'getIndustry'
			}),
			pages () {
				if(this.agentList.pageInfo){
					return this.agentList.pageInfo.totalPage
				}
			}
		},
		data () {
			return {
				eventPage: 1,
				guestTitle: '新增客户',
				eventFunt: 'fetchAgent',
				showCheck: false,

				username: '',
				password: '12345678',
				description: '',
				company: '',
				address: '',
				industry: '',
				phone: '',
				email: '',
				remarks: '',
				showPwd: 1 ,
				infoTips: ''
			}
		},
		methods: {
			goPage (data) {
				this.eventPage = data.page
			},

			geustAdd (title) {

				if(title === '新增客户'){
					this.showPwd = 1
					this.guestTitle = title
				}
				// 初始化
				this.username = ''
				this.password = '12345678'
				this.description = ''
				this.company = ''
				this.address = ''
				this.industry = ''
				this.phone = ''
				this.email = ''
				this.remarks = ''

				$('#myModalNew').modal('show')
				this.guestTitle = title
			},

			agentSave (isAdd) {
				let params = {
					username:     this.username,
					description:  this.description,
					company:      this.company,
					address:      this.address,
					industry:     this.industry,
					phone:        this.phone,
					email:        this.email,
					remarks:      this.remarks
				}

				if(!this.company){
					this.infoTips = '公司名称不能为空'
					return
				}
				if(!this.username){
					this.infoTips = '登录帐号不能为空'
					return
				}
				if(!this.password && this.showPwd){
					this.infoTips = '登录密码不能为空'
					return
				}
				if(!this.description){
					this.infoTips = '联系人不能为空'
					return
				}
				if(!this.phone){
					this.infoTips = '联系电话不能为空'
					return
				}
				if(!this.address){
					this.infoTips = '公司地址不能为空'
					return
				}

				if(isAdd) {
					params.password = this.password
					this.$store.dispatch('fetchAgentAdd', params)
				}else{
					this.showPwd = 1
					this.$store.dispatch('fetchAgentEdit', params)
				}

				this.infoTips = ''
				$('#myModalNew').modal('hide')
			},

			geustEdit (title, username) {

				if(title === '编辑客户'){
					this.showPwd = 0
					this.guestTitle = title
				}

				this.$store.dispatch('fetchAgentInfo', {name: username})
				$('#myModalNew').modal('show')
			},

			checkValue () {

				if(this.email) {
					let patrn = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
					if (!patrn.exec(this.email)) {
						this.email = ''
						alert('请输入正确的电子邮箱')
						return
					}
				}

				if(this.username) {
					if(new RegExp("^((1[0-9]))[0-9]{9,9}$").test(this.username) == false){
						this.username = ''
						alert('请输入正确的手机号码作为登录帐号')
						return
					}
				}

			}

		},
		mounted () {

			// 角色
			this.$store.dispatch('fetchRole')

			this.$store.dispatch('fetchAgent', {page: 1})

			// 行业列表
			this.$store.dispatch('fetchIndustry')

		},
		components: {
			LscPage
		},
		watch: {
			agentInfo (newVal) {

					this.username = newVal.result.username,
					this.description = newVal.result.description,
					this.company = newVal.result.company,
					this.address = newVal.result.address,
					this.industry = newVal.result.industry,
					this.phone = newVal.result.phone,
					this.email = newVal.result.email,
					this.remarks = newVal.result.remarks
			},
			agentList (newVal) {
				this.eventPage = newVal.pageInfo.pageIndex
			}
		}
	}


</script>

<style>
.order-set {
	padding: 0 20px 20px 20px;
}
</style>
